<template>
  <div class="user-content">
    <Steps :current="step" class="step">
      <Step :title="title1" :content="$t('login_cerification')"></Step>
      <Step :title="title2" :content="$t('change_password')"></Step>
      <Step :title="title3" :content="$t('change_password_succeed')"></Step>
    </Steps>
    <div class="model-login" v-show="loginShow">
      <Form :model="formLogin">
        <FormItem prop="user">
          <Input type="text" v-model="formLogin.account" :placeholder="$t('account')" maxlength=250> <!--请输入账号-->
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input type="password" v-model="formLogin.password" :placeholder="$t('password')" :password=true maxlength=250> <!-- 请输入密码-->
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleLoginSubmit()">{{$t('login_cerification')}}</Button>
        </FormItem>
      </Form>
    </div>
    <div class="model-update" v-show="updateShow">
      <Form :model="formUpdate">
        <FormItem prop="user">
          <Input type="text" v-model="formUpdate.account" :placeholder="$t('account')" :disabled=true maxlength=250>
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input type="password" v-model="formUpdate.password" :placeholder="$t('new_password')" :password=true maxlength=250>
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input type="password" v-model="formUpdate.confirm" :placeholder="$t('verify_new_password')" :password=true maxlength=250>
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleUpdateSubmit()">{{$t('change_password')}}</Button>
        </FormItem>
      </Form>
    </div>
    <div class="model-finish" v-show="finishShow">
      <Icon type="md-checkmark-circle" class="icon" />{{$t('change_password_succeed')}}
    </div>
  </div>
</template>

<script>
import {changePaasword} from '@/api/user'
import {checkLogin, login, logout} from '@/api/login'
import {apiResult} from "@/libs/util";
export default {
  name: 'Login',
  computed:{
  },
  data () {
    return {
      title1:'',
      title2:'',
      title3:'',
      formLogin: {
        account: '',
        password: ''
      },
      formUpdate: {
        account: '',
        password: '',
        confirm: ''
      },
      loginShow: true,
      updateShow: false,
      finishShow: false,
      step: 0,

    }
  },
  methods: {
    handleLoginSubmit () {
      checkLogin(this.formLogin.account, this.formLogin.password).then(res => {
          apiResult(res.data,false,result=>{
            this.formUpdate.account = this.formLogin.account;
            this.step2()
          })
      })
    },
    handleUpdateSubmit () {
      if (this.formUpdate.password !== this.formUpdate.confirm) {
        this.$Message.error('确认密码不一致')
        return;
      }
      changePaasword(JSON.stringify(
        {userCode: this.formUpdate.account,
          oldPassword: this.formUpdate.password,
          newPassword: this.formUpdate.confirm}))
        .then(res => {
          apiResult(res.data,false,result=>{
            this.step3()
          })
        });
    },
    step1 () {
      this.loginShow = true
      this.updateShow = false
      this.finishShow = false
      this.step = 0
      this.title1 = this.$t('step_state_underway')//'进行中'
      this.title2 = this.$t('step_state_unfinished')//'待完成'
      this.title3 = this.$t('step_state_unfinished')//'待完成'
    },
    step2 () {
      this.loginShow = false
      this.updateShow = true
      this.finishShow = false
      this.step = 1
      this.title1 = this.$t('step_state_finished')//'已完成'
      this.title2 = this.$t('step_state_underway')//'进行中'
      this.title3 = this.$t('step_state_unfinished')//'待完成'
    },
    step3 () {
      this.loginShow = false
      this.updateShow = false
      this.finishShow = true
      this.step = 2
      this.title1 = this.$t('step_state_finished')//'已完成'
      this.title2 = this.$t('step_state_finished')//'已完成'
      this.title3 = this.$t('step_state_finished')//'已完成'
    }
  },
  mounted () {
    this.step1()
  }
}
</script>

<style lang="less">
  @import './ChangePassword.less';
</style>
